<template>
  <Card title="行业数据" class="industry">
    <div class="echarts">
      <div style="width: 100%; height: 100%" ref="echartsContainer"></div>
    </div>

    <div class="info">
      <p><span>上半年装备制造业利润同比增长6.6% </span><span>2024-08-01</span></p>
      <p><span>柴油机历年销量及增长率（2024年6月） </span><span>2024-07-31</span></p>
      <p><span>金融业数字化转型报告</span><span>2024-07-31</span></p>
      <p>
        <span>2024年6月我国混凝土泵车出口3120.85万美元，同比增长84.3... </span
        ><span>2024-07-31</span>
      </p>
      <p>
        <span>2024年6月我国履带式挖掘机出口68404.53万美元，同比下降... </span
        ><span>2024-07-31</span>
      </p>
    </div>
  </Card>
</template>

<script setup lang="ts">
import Card from './Card.vue'
import { ref, onMounted, getCurrentInstance } from 'vue'
const internalInstance = getCurrentInstance()
const echarts = internalInstance!.appContext.config.globalProperties.$echarts
const echartsContainer = ref(null)
onMounted(() => {
  const myCharts = echarts.init(echartsContainer.value)
  const option = {
    title: {
      text: '1-6月机械工业规模以上工业增加值增速',
      textStyle: {
        fontSize: 14
      }
    },
    legend: { data: ['2024', '2023'], top: 15 },
    xAxis: {
      type: 'category',
      data: ['1-2月', '1-3月', '1-4月', '1-5月', '1-6月']
    },
    grid: {
      top: 40,
      left: 30,
      right: 10,
      bottom: 50
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '2024',
        data: [7, 6.1, 6.3, 6.2, 6],
        type: 'line',
        smooth: true
      },
      {
        name: '2023',
        data: [2.4, 3, 3.6, 3.6, 3.8],
        type: 'line',
        smooth: true
      }
    ]
  }
  myCharts.setOption(option)
})
</script>

<style lang="less" scoped>
.industry {
  display: flex;
  flex-direction: column;
  width: 400px;
  font-size: 14px;
  .echarts {
    flex: 1.2;
  }
  .info {
    flex: 1;
    overflow: hidden;
    p {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      span {
        font-weight: bold;
        color: #68696d;
        letter-spacing: 1px;
      }
      span:nth-of-type(2) {
        color: #9a9ca2;
        letter-spacing: normal;
      }
    }
  }
}
</style>
